<!DOCTYPE html>
<html>

<head>
  <% include global/meta.html %>
    <% include global/top-css.html %>
      <title>yuscms</title>
</head>

<body>

  <main class="main" data-info="<%=admin.permission%>">
    <div class="ys-admin-pos c-a1a3aa">
      首页
      <span class="f-sum">></span>
      <span class="c-565b6d">房产管理</span>
      <span class="f-sum">></span>
      <span class="c-565b6d">新增</span>
    </div>

    <div class="ys-admin-tablist">
      <div class="ys-admin-tab-header row justify-content-b">
        <p class="f-14 c-565b6d pl-8 pt-6"></p>
      </div>

      <div class="mr-10 ml-10">
        <form @submit.prevent="checkForm" name="form">
          <ul class="overflow-h pb-20">
            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label">文档标题</label>
              </div>
              <div class="col-10">
                <input type="text" name="title" v-model="params.title" placeholder="最大50字" class="input" />
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">栏　　目</label>
              </div>

              <div class="col-10">
                <div class="select flex row">
                  <select class="flex" name="pid" v-model="params.nav" v-html="optionRender()">
                  </select>
                </div>
                {{params.nav}}
              </div>
            </li>
            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">内容属性</label>
              </div>

              <div class="col-bd c-666">
                <input class="checkbox pos-r t-2 mr-5" type="checkbox" v-model="params.attr" name="attr" value="头条">头条
                <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="推荐">推荐
                <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="加粗">加粗
                <input class="checkbox pos-r t-2 mr-5 ml-10" type="checkbox" v-model="params.attr" name="attr" value="跳转">跳转
              </div>
            </li>

            <!-- 房产模块 start -->
            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">类　　型</label>
              </div>

              <div class="col-bd c-666">
                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.type" name="type" value="1">整租
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.type" name="type" value="2">合租
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.type" name="type" value="3">住宅
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.type" name="type" value="4">写字楼
              </div>
            </li>

            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label">价　　格</label>
              </div>
              <div class="col-10">
                <input type="number" name="price" v-model="params.price" placeholder="价格，租金" class="input" />
              </div>
            </li>

            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label">户　　型</label>
              </div>
              <div class="col-bd c-666">
                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.huxing" name="huxing" value="1">1居
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.huxing" name="huxing" value="2">2居
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.huxing" name="huxing" value="3">3居
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.huxing" name="huxing" value="4">4居
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.huxing" name="huxing" value="5">4居以上
              </div>
            </li>

            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label">面　　积</label>
              </div>
              <div class="col-10">
                <input type="number" name="mianji" v-model="params.mianji" placeholder="建筑面积" class="input" />
              </div>
            </li>

            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label">朝　　向</label>
              </div>
              <div class="col-bd c-666">
                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.chaoxiang" name="chaoxiang" value="1">朝南
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.chaoxiang" name="chaoxiang" value="2">朝北

              </div>
            </li>
            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label">风　　格</label>
              </div>
              <div class="col-bd c-666">
                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.fengge" name="fengge" value="1">待定
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.fengge" name="fengge" value="2">待定
              </div>
            </li>
            <li class="row  pd-10 f-14">
              <div class="col-hd">
                <label class="label">学　　校</label>
              </div>
              <div class="col-bd c-666">
                <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.xuexiao" name="xuexiao" value="1">有
                <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.xuexiao" name="xuexiao" value="2">没有
              </div>
            </li>
            <li class="row  pd-10 f-14">
              <el-form ref="form" :model="params" label-width="68px" size="mini">
       
              <el-form-item label="区　　域">
                  <el-select v-model="params.quyu" placeholder="请选择活动区域">
                    <el-option label="新华区" value="新华区"></el-option>
                    <el-option label="长安区" value="长安区"></el-option>
                    <el-option label="裕华区" value="裕华区"></el-option>
                    <el-option label="桥东区" value="桥东区"></el-option>
                    <el-option label="桥西区" value="桥西区"></el-option>
                    <el-option label="开发区" value="开发区"></el-option>
                    <el-option label="鹿泉区" value="鹿泉区"></el-option>
                    <el-option label="藁城区" value="藁城区"></el-option>
                  </el-select>
                </el-form-item>
      </el-form>
      </li>

      <li class="row  pd-10 f-14">
              <div class="col-hd">
                  <label class="label">地　　址</label>
              </div>
              <div class="col-10">
                  <input type="text" name="addr" v-model="params.addr" placeholder="详细地址" class="input" />
              </div>
          </li>

          <li class="row pd-10 f-14">
            <div class="col-hd">
                <label class="label">厨　　卫</label>
            </div>

            <div class="col-10">
                <input type="text" name="chuwei" v-model="params.chuwei" placeholder="一厨一卫" class="input" />
            </div>
        </li>

          <li class="row pd-10 f-14">
              <div class="col-hd">
                  <label class="label">开盘时间</label>
              </div>

              <div class="col-10">
                  <el-date-picker v-model="params.kaipan_time" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss">
                  </el-date-picker>
              </div>
          </li>

          <li class="row pd-10 f-14">
              <div class="col-hd">
                  <label class="label">证　　件</label>
              </div>

              <div class="col-10">
                  <input type="text" name="zhengjian" v-model="params.zhengjian" placeholder="五证齐全" class="input" />
              </div>
          </li>

          <li class="row pd-10 f-14">
              <div class="col-hd">
                  <label class="label">交　　通</label>
              </div>

              <div class="col-10">
                  <input type="text" name="jiaotong" v-model="params.jiaotong" placeholder="交通" class="input" />
              </div>
          </li>

          <li class="row  pd-10 f-14">
              <div class="col-hd">
                  <label class="label">当前楼层</label>
              </div>
              <div class="col-10">
                  <input type="number" name="cur_louceng" v-model="params.cur_louceng" placeholder="当前楼层" class="input" />
              </div>
          </li>

          <li class="row  pd-10 f-14">
              <div class="col-hd">
                  <label class="label">总共楼层</label>
              </div>
              <div class="col-10">
                  <input type="number" name="total_louceng" v-model="params.total_louceng" placeholder="总共楼层" class="input" />
              </div>
          </li>

          <li class="row  pd-10 f-14">
              <div class="col-hd">
                  <label class="label">状　　态</label>
              </div>
              <div class="col-bd c-666">
                  <input class="radio pos-r t-2 mr-5" type="radio" v-model="params.zhuangtai" name="zhuangtai" value="1">在售
                  <input class="radio pos-r t-2 mr-5 ml-10" type="radio" v-model="params.zhuangtai" name="zhuangtai" value="2">售罄
              </div>
          </li>

            <!-- 房产模块 end -->
            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">TAG标签</label>
              </div>
              <div class="col-10 c-666">
                <input type="text" name="tag" id="" placeholder="例新闻,美女" v-model="params.tag" class="input" />
              </div>
            </li>


            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">关&nbsp; 键&nbsp; 字</label>
              </div>
              <div class="col-10 c-666">
                <input type="text" name="keyword" v-model="params.keyword" placeholder="例yuscms,cms管理系统" id="" class="input" />
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">缩&nbsp; 略&nbsp; 图</label>
              </div>
              <div class="col-bd row c-666">
                <img v-if="params.thumbnail" class="thumb" :src="params.thumbnail" alt="">
                <span class="ico-camera">
                  <input @change="sendThumb" type="file" name="pic" id="thumb">
                </span>
              </div>
              <div class="col-ft col-16 c-999">
                (缩略图必须是jpg,gif,png,并且50k之内)
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">文章来源</label>
              </div>
              <div class="col-10 c-666">
                <input type="text" name="source" id="" v-model="params.source" placeholder="请输入文章来源，例网络" class="input" />
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">作　　者</label>
              </div>
              <div class="col-10">
                <input type="text" name="author" id="" v-model="params.author" class="input c-666" placeholder="请输入作者，例session.admin_user"
                />
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">内容摘要</label>
              </div>
              <div class="col-10 c-666 row">
                <textarea class="flex textarea pt-5" v-model="params.info" name="info" id="" placeholder="请输入内容摘要，(内容摘要200之内)" cols="30"
                  rows="3"></textarea>
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">栏目内容</label>
              </div>

              <div class="col-bd c-666">
                <div id="editor" class="pos-r z1">
                  <p>欢迎使用
                    <b>yuscms</b> 系统!</p>
                </div>
                <input type="hidden" name="content" v-model="params.content">
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">发布时间</label>
              </div>

              <div class="col-10">
                <el-date-picker v-model="params.date" type="datetime" placeholder="选择日期时间" format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-12 row">
                <label class="label pt-4">浏览次数</label>
                <input type="number" name="count" v-model="params.count" class="flex input c-666" value="0">
              </div>
              <div class="col-12 row">
                <label class="label pt-4 ml-10">管家电话</label>
                <input type="number" v-model="params.gold" class="c-666 flex input" pattern="[0-9]*" name="gold">
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-12 row">
                <label class="label pt-4">文档排序</label>
                <div class="select flex pos-r">
                  <select name="sort" class="wauto c-666" v-model="params.sort" id="">
                    <option value="0">默认排序</option>
                    <option value="1">置顶一天</option>
                    <option value="2">置顶一周</option>
                    <option value="3">置顶一月</option>
                    <option value="4">置顶一年</option>
                  </select>
                </div>
              </div>
              <div class="col-12 row">
                <label class="label pt-4 ml-10">阅读权限</label>
                <div class="select flex pos-r">
                  <select name="readlimit" class="wauto c-666" v-model="params.readlimit" id="">
                    <option value="0" selected="selected">开发浏览</option>
                    <option value="1">初级会员</option>
                    <option value="2">中级会员</option>
                    <option value="3">高级会员</option>
                    <option value="4">VIP会员</option>
                  </select>
                </div>
              </div>

            </li>

            <li class="row pd-10 f-14">
              <div class="col-12">
                <label class="label">评论选项</label>
                <input type="radio" class="radio pos-r t-4 mr-5" v-model="params.comment" name="comment" checked="checked" value="1">允许评论
                <input type="radio" class="radio pos-r t-4 mr-5 ml-10" v-model="params.comment" name="comment" value="0">禁止评论
              </div>
            </li>

            <li class="pd-10 mt-35">
              <div class="col-hd">
                &nbsp;&nbsp;&nbsp;&nbsp;
              </div>
              <div class="col-bd row ml-35">
                <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布" />
                <input name="send" class="btn btn-reset ml-35" type="reset" value="重置" />
              </div>
            </li>
          </ul>
        </form>
      </div>
    </div>
  </main>

  <% include global/all-js.html %>
    <script>
      var vm = new Vue({
        el: '.main',
        data: {
          list: [],
          params: {
            id: $m.getParams('id'),
            title: "",
            nav: "0",
            attr: [],
            tag: "",
            keyword: "",
            thumbnail: '',
            source: "网络",
            author: "admin",
            info: "",
            content: "",
            comment: "1",
            count: "0",
            sort: "1",
            gold: "0",
            readlimit: "0",
            date: new Date(),

            //房产模块
            type: 1,//类型：1->整租 2->合租 3->住宅 4->写字楼
            price: 0,//租金 价格
            huxing: 1,//户型：1->1居 2居 3居 4居 5->4局以上
            mianji: 80,//面积
            chaoxiang: 1,//朝向：1朝南 2朝北
            fengge: 1,//风格：待定
            xuexiao: 1,//学校：1有 2没有
            quyu: '',//新华区、长安区、裕华区、桥东区、桥西区、开发区、鹿泉区、藁城区
            addr:'',//地址
            chuwei:'',//厨卫
            kaipan_time:new Date(),//开盘时间
            zhengjian:'',//证件
            jiaotong:'',//交通
            cur_louceng:0,//当前楼层
            total_louceng:0,//总楼层
            zhuangtai:1 //状态 1 在售 2售罄

          }
        },
        methods: {


          getData() {
            var _this = this;
            axios
              .get("/api/admin/category")
              .then(data => {
                var filterData = data.data;
                if (filterData.success) {
                  _this.list = filterData.data;
                } else {
                  location.href = "/admin/login";
                }
              })
              .catch(error => {
                console.error(error);
              });
          },

          queryById() {
            let _this = this;
            console.log( _this.params.id)
            axios
              .get("/api/admin/house/queryId", {
                params: { id: _this.params.id }
              })
              .then(data => {
                let filterData = data.data;
                if (filterData.success) {
                  _this.params = filterData.data[0];
                  _this.params.attr = filterData.data[0].attr
                    ? filterData.data[0].attr.split(",")
                    : [];
                  _this.params.nav =
                    filterData.level[0].id + "," + filterData.level[0].level;
                  _this.editor();
                  _this.loading = false;
                } else {
                  location.href = "/admin/login";
                }
              })
              .catch(error => {
                console.error(error);
              });
          },

          optionRender: function () {
            let list = this.list;
            let str = '<option selected="selected" value="0">顶部导航</option>';

            function option(list) {
              for (var item of list) {
                if (item.pid != 0) {
                  str += `<option value="${item.id}${"," +
                    item.level}">${"&nbsp;&nbsp;".repeat(
                      item.level
                    )}|-${item.nav_name}</option>`;
                } else {
                  str += `<option value="${item.id}${"," +
                    item.level}">${item.nav_name}</option>`;
                }
                if (item.children) {
                  option(item.children);
                }
              }
            }
            option(list);
            return str;
          },

          sendThumb: function () {
            var _this = this;

            var formData = new FormData();
            formData.append("file", $("#thumb")[0].files[0]);
            var thumb = $("#thumb")
              .val()
              .split(".")[1];

            if (
              thumb != "jpg" &&
              thumb != "gif" &&
              thumb != "jpeg" &&
              thumb != "png"
            ) {
              tipsWarn(_this, "请上传图片！");
              return false;
            }

            if ($("#thumb")[0].files[0].size / 1000 > 100) {
              tipsWarn(_this, "为了节省空间，缩略图不能超过100k");
              return false;
            }

            let config = {
              headers: { "Content-Type": "multipart/form-data" }
            };

            axios
              .post("/api/admin/article/thumb", formData, config)
              .then(data => {
                let filterData = data.data;
                _this.params.thumbnail = filterData.data[0];
              })
              .catch(error => {
                console.error(error);
              });
          },


          editor: function () {
            var _this = this;

            var editor = new wangEditor("#editor");
            editor.customConfig.debug = true;
            editor.customConfig.uploadImgServer = "/api/admin/upload/img"; //上传到服务器API地址
            editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
            editor.customConfig.uploadImgMaxLength = 5;
            editor.customConfig.linkCheck = function (text, link) {
              return true;
            };
            editor.create();
            editor.txt.html(_this.params.content);
            $(".w-e-text").on("input", function () {
              _this.params.content = editor.txt.html();
            });

          },
          articleEdit() {
            let _this = this;
            if (_this.params.nav.includes(',')) {
              _this.params.nav = _this.params.nav.split(',')[0]
            }
            console.log(_this.params)
            axios.post('/api/admin/house/edit', _this.params)
              .then((data) => {
                console.log(data)
                let filterData = data.data;
                if (filterData.data.affectedRows === 1) {
                  tips(_this, '更新成功^_^')
                }
              })
              .catch((error) => {
                console.log(error);
              });
          },

          checkForm: function () {
            var _this = this;
            if (!hasPermission("3")) {
              tipsWarn(_this, "对不起,您没有操作权限^_^");
              return;
            }
            var fm = document.form;

            var _this = this;
            if (_this.params.nav == "0") {
              tipsWarn(_this, "请选择文章栏目");
              return false;
            }

            if (
              _this.params.title == "" ||
              _this.params.title.length < 2 ||
              _this.params.title.length > 50
            ) {
              tipsWarn(_this, "标题不得为空且不能小于两位不大于50位！");
              fm.title.focus();
              return false;
            }

            if (_this.params.price == 0) {
              tipsWarn(_this, '不要随便忽悠，价格肯定不是零蛋');
              fm.price.focus();
              return false;
            }

            if (_this.params.mianji == 0) {
              tipsWarn(_this, '不要随便忽悠，房子面积肯定不是0');
              fm.mianji.focus();
              return false;
            }

            if (_this.params.quyu == '') {
              tipsWarn(_this, '不要随便忽悠，请选择区域');
              return false;
            }

            if (_this.params.addr == '') {
              tipsWarn(_this, '不要随便忽悠，房子竟然没有地址！');
              return false;
            }

            if (_this.params.tag.length > 30) {
              tipsWarn(_this, "tag标签长度不能不大于30位！");
              fm.tag.focus();
              return false;
            }

            if (_this.params.keyword.length > 30) {
              tipsWarn(_this, "关键字长度不能不大于30位！");
              fm.keyword.focus();
              return false;
            }

            if (_this.params.source.length > 20) {
              tipsWarn(_this, "文章来源长度不能不大于20位！");
              fm.source.focus();
              return false;
            }

            if (_this.params.author.length > 10) {
              tipsWarn(_this, "作者长度不能不大于10位！");
              fm.author.focus();
              return false;
            }

            if (_this.params.info.length > 200) {
              tipsWarn(_this, "文章摘要不能超过200个字！");
              return false;
            }

            if (_this.params.content.length <= 0) {
              tipsWarn(_this, "文章内容不能为空！");
              return false;
            }

            if (_this.params.gold.value < 0) {
              tipsWarn(_this, "金币不能小于0");
              return false;
            }

            if (_this.params.count < 0) {
              tipsWarn(_this, "浏览次数不能小于0");
              return false;
            }

            _this.articleEdit();
          }
        },

        created: function () {
          this.getData();
          this.queryById();
        },

        mounted: function () {
          //this.editor();
        }
      });
    </script>
</body>

</html>